<template>
  <div class="min-h-screen bg-gray-50">
    <div class="pt-20"></div>
    <div class="container mx-auto px-6 py-6">
      <!-- 顶部横向布局：左侧海报/名称/标签，右侧报名按钮 -->
      <div class="bg-white rounded-2xl shadow border border-gray-100 p-6">
        <div class="flex items-start justify-between gap-6">
          <!-- 左侧海报卡片 -->
          <div class="w-full md:w-96">
            <div class="rounded-xl overflow-hidden shadow border border-gray-100">
              <div class="h-52 bg-gradient-to-br from-blue-400 to-blue-600 relative">
                <div class="absolute top-3 right-3 text-xs bg-white/90 text-gray-700 px-2 py-1 rounded-full">{{ difficulty }}</div>
              </div>
              <div class="p-4">
                <div class="text-xs bg-blue-100 text-blue-600 inline-block px-2 py-1 rounded">直播班级套餐</div>
                <div class="text-xs text-gray-500 inline-block ml-2">共 {{ lessonsCount }} 节</div>
                <div class="mt-2 text-lg font-semibold text-gray-900">{{ title }}</div>
                <div class="text-sm text-gray-600 mt-1">{{ shortDesc }}</div>
              </div>
            </div>
          </div>

          <!-- 右侧介绍与报名 -->
          <div class="flex-1">
            <div class="flex items-start gap-3">
              <el-button size="small" circle :icon="ArrowLeft" @click="goBack" />
              <div class="flex-1">
                <h1 class="text-2xl font-bold text-gray-900 mb-2">班级介绍</h1>
                <div class="text-gray-700 leading-7">{{ summary }}</div>
                <div class="mt-4 text-gray-700"><span class="font-medium">日期：</span>{{ dateRange }}</div>
              </div>
              <div>
                <el-button type="success" size="large" class="rounded-lg" @click="handleEnroll">{{ enrolled ? '已报名' : '报名班级' }}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 下方详细模块：课程介绍 / 就业优势 / 开班信息 / 权益 -->
      <div class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-6">
          <div class="bg-white rounded-2xl shadow border border-gray-100 p-6">
            <h2 class="text-lg font-semibold mb-4">授课老师</h2>
            <div class="flex items-center gap-4">
              <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center text-2xl">👨‍🏫</div>
              <div class="flex-1">
                <div class="text-base font-semibold text-gray-900">张老师</div>
                <div class="text-sm text-gray-600">资深讲师 · 行业经验10年 · 擅长项目实战教学</div>
              </div>
              <el-button type="primary" size="small" class="rounded" @click="handleEnroll">报名该老师班级</el-button>
            </div>
          </div>
          <div class="bg-white rounded-2xl shadow border border-gray-100 p-6">
            <h2 class="text-lg font-semibold mb-4">课程介绍</h2>
            <ul class="list-disc pl-5 space-y-2 text-gray-700">
              <li v-for="item in introPoints" :key="item">{{ item }}</li>
            </ul>
          </div>

          <div class="bg-white rounded-2xl shadow border border-gray-100 p-6">
            <h2 class="text-lg font-semibold mb-4">就业优势</h2>
            <ul class="list-disc pl-5 space-y-2 text-gray-700">
              <li v-for="adv in advantages" :key="adv">{{ adv }}</li>
            </ul>
          </div>
        </div>

        <div class="space-y-6">
          <div class="bg-white rounded-2xl shadow border border-gray-100 p-6">
            <h3 class="text-base font-semibold mb-2">开班时间</h3>
            <div class="text-gray-700">{{ dateRange }}</div>
            <div class="text-xs text-gray-500 mt-1">直播周期班 · 固定节奏推进</div>
          </div>
          <div class="bg-white rounded-2xl shadow border border-gray-100 p-6">
            <h3 class="text-base font-semibold mb-3">你将获得</h3>
            <ul class="space-y-2 text-gray-700">
              <li>直播授课 + 回放复习</li>
              <li>考勤/作业/互动管控</li>
              <li>班级社群与教师答疑</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'
import { isCourseEnrolled, enrollCourse } from '@/api/course'

const route = useRoute()
const router = useRouter()

const classId = computed(() => route.params.classId)

const title = ref('Python直播班级（2025春）')
const dateRange = ref('2025-03 ~ 2025-06')
const difficulty = ref('入门-进阶')
const summary = ref('系统直播教学，覆盖从基础到实战的完整学习路径，含作业点评与社群辅导。')
const shortDesc = ref('使用Python进行数据处理、可视化与实战项目训练，构建完整学习路径')
const lessonsCount = ref(18)

const introPoints = ref([
  'Python基础语法与数据结构',
  '数据分析与可视化（pandas/matplotlib）',
  '项目实战：数据清洗与报表自动化',
  '阶段作业与点评，直播实时互动'
])

const advantages = ref([
  '实时互动与督学机制，学习更有节奏',
  '项目型训练，提升实战与作品集',
  '班级出勤与作业纳入结课评估',
  '结课可获学习报告与推荐建议'
])

const enrolled = ref(false)

onMounted(() => {
  enrolled.value = isCourseEnrolled(classId.value)
})

const handleEnroll = async () => {
  if (enrolled.value) return
  const res = await enrollCourse(classId.value)
  if (res?.success) {
    enrolled.value = true
    ElMessage.success('报名成功，后续将同步班级信息')
  } else {
    ElMessage.error(res?.message || '报名失败')
  }
}

const goBack = () => {
  // 返回课程商城并保持“直播班级”Tab
  router.push({ path: '/courses', query: { type: 'class' } })
}
</script>

<style scoped>
</style>


